<style>
    .container {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .btnBox {
        padding: 15px 0;
    }

    input {
        padding: 3px 5px;
        margin-right: 10px;
        box-sizing: border-box;
        outline: 0;
    }

    .menuBox {
        padding: 15px;
        border-bottom: 4px #ecf0f5 solid;
        /*margin-bottom: 15px;*/
        /*background: #f0f0f0;*/
    }

    .menuBox:last-child {
        margin-bottom: 0;
    }

    .subMenuBox {
        padding: 15px 0 0 30px;
    }
</style>
<form action="/wechat/create-menu.html" method="post">
    <div class="container">
        <div class="box">
            <?php foreach ($menuJson as $k => $v): ?>
                <div class="menuBox">
                <span>菜单名称：<input type="text" value="<?= $v['name'] ?>" name="content[<?= $k; ?>][name]"
                                  class="menuName"></span>
                    <?php if (empty($v['sub_button'])): ?>
                        <span class="span1">菜单类型：
                    <select name="content[<?= $k; ?>][type]">
                        <option value="view" <?php if ($v['type'] == 'view'): ?> selected <?php endif; ?> >URL跳转</option>
                        <option value="click" <?php if ($v['type'] == 'click'): ?>selected<?php endif ?> >点击推送</option>

                    </select>
                </span>
                        <span class="span1">菜单值：<input type="text"
                                                       value="<?php if ($v['type'] == 'click') echo $v['key']; else echo $v['url']; ?>"
                                                       name="content[<?= $k; ?>][val]" class="menuValue"></span>
                    <?php else: ?>
                        <span class="span1" style="display: none">菜单类型：
                    <select name="content[<?= $k; ?>][type]">
                        <option value="click">点击推送</option>
                        <option value="view">URL跳转</option>
                    </select>
                        </span>
                        <span class="span1" style="display: none">菜单值：<input type="text"
                                                       value=""
                                                       name="content[<?= $k; ?>][val]" class="menuValue"></span>

                    <?php endif; ?>
                    <input type="button" value="添加子菜单" data-num='<?= $k ?>' class="addSubMenu">
                    <input type="button" value="删除" class="removeMenu">
                    <?php if (!empty($v['sub_button'])): ?>
                        <?php foreach ($v['sub_button'] as $key => $val): ?>
                            <div class="subMenuBox">
                                <span>菜单名称：<input type="text" value="<?= $val['name'] ?>"
                                                  name="content[<?= $k ?>][0][<?= $key ?>][name]"
                                                  class="menuName"></span>
                        <span>菜单类型：
                            <select name="content[<?= $k ?>][0][<?= $key ?>][type]">
                                <option value="view" <?php if ($val['type'] == 'view'): ?>selected<?php endif; ?> >URL跳转
                                </option>
                                <option value="click" <?php if ($val['type'] == 'click'): ?>selected<?php endif ?> >点击推送
                                </option>

                            </select>
                        </span>
                        <span>菜单值：<input type="text"
                                         value="<?php if ($val['type'] == 'click') echo $val['key']; else echo $val['url']; ?>"
                                         name="content[<?= $k ?>][0][<?= $key ?>][val]" class="menuValue"></span>
                                <input type="button" value="删除" class="removeMenu">
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
        <div class="btnBox">
            <input type="button" value="添加主菜单" class="addMenu">
            <input type="submit" value="提 交">
        </div>
    </div>
</form>
<?php $js = '

        $(\'.btnBox\').on(\'click\',\'.addMenu\',function(){
            var num = $(".menuBox").length;
            if(num >= 3){
                alert("主菜单最多设置3个");
                return;
            }
            $(\'.box\').append(\'<div class="menuBox"><span>菜单名称：<input type="text" value="" name="content[\'+num+\'][name]" class="menuName"></span><span class="span1">菜单类型：<select name="content[\'+num+\'][type]"><option value="view">URL跳转</option><option value="click" >点击推送</option></select></span><span class="span1">菜单值：<input type="text" value="" name="content[\'+num+\'][val]" class="menuValue"></span><input type="button" data-num = \'+num+\' value="添加子菜单" class="addSubMenu"><input type="button" value="删除" class="removeMenu"></div>\')
        })
        $(\'.menuBox\').on(\'click\',\'.addSubMenu\',function(){
            var num = $(this).attr("data-num");
            var cnum = $(this).parent(\'.menuBox\').find(\'.subMenuBox\').length;
            if(cnum >=5){
                alert(\'子菜单最多设置5个\');
                return ;
            }
            $(this).parent(\'.menuBox\').append(\'<div class="subMenuBox"><span>菜单名称：<input type="text" value="" name="content[\'+num+\'][0][\'+cnum+\'][name]" class="menuName"></span><span>菜单类型：<select name="content[\'+num+\'][0][\'+cnum+\'][type]"><option value="view">URL跳转</option><option value="click" >点击推送</option></select></span><span>菜单值：<input type="text" value="" name="content[\'+num+\'][0][\'+cnum+\'][val]" class="menuValue"></span><input type="button" value="删除" class="removeMenu"></div>\');
            //alert($(this).parent(\'.menuBox\').find(\'.subMenuBox\').length);

            $(this).prevAll(\'span.span1\').remove();
        })
        $(\'.menuBox\').on(\'click\',\'.removeMenu\',function(){
            $(this).parent(\'.menuBox\').remove();
        })
        $(\'.subMenuBox\').on(\'click\',\'.removeMenu\',function(){
            $(\'.menuBox\').removeClass(\'ddd\')
            $(this).parents(\'.menuBox\').addClass(\'ddd\');
            $(this).parent(\'.subMenuBox\').remove();
            if($(\'.menuBox.ddd>.subMenuBox\').length==0){
                $(\'.menuBox.ddd\').removeClass(\'ddd\').find(\'span.span1\').show();
            }
        })
    ';
$this->registerJs($js);
?>
